<nz-modal (nzOnCancel)="handlerCancel()" [(nzVisible)]="visible" nzMaskClosable="false"
          nzTitle="{{'common.database'|translate}} {{'common.structure'|translate}}"
          nzWidth="70%">
  <div *nzModalContent>
    <nz-skeleton *ngIf="loading.button; else hasValues" nzActive="true">
    </nz-skeleton>
    <ng-template #hasValues>
      <app-component-antd-empty *ngIf="!structure; else hasCompleteValue"></app-component-antd-empty>
      <ng-template #hasCompleteValue>
        <div style="margin-bottom: 15px;">
          <button nz-button nzType="dashed" nzSize="small"
                  (click)="handlerFormatter()">
            <i class="fa fa-code"></i>&nbsp;{{'common.format'|translate}}
          </button>
          <button nz-button nzType="primary" nzSize="small"
                  (click)="handlerCopy()">
            <i class="fa fa-copy"></i>&nbsp;{{'common.copy'|translate}}
          </button>
        </div>
        <ngx-codemirror [(ngModel)]="structure" [options]="editorConfig" style="margin-top: 10px;"></ngx-codemirror>
      </ng-template>
    </ng-template>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="dashed" nzDanger (click)="handlerCancel()">
      {{'common.close'|translate}}
    </button>
  </div>
</nz-modal>
